<template>
  <q-drawer
    v-model="data.ss"
    show-if-above
    bordered
    :breakpoint="0"
    :width="70"
    class="column row q-py-md"
  >
    <div class="col">
      <q-tabs
        v-model="data.tab"
        class="text-grey-8"
        vertical
        indicator-color="transparent"
        active-color="primary"
        outside-arrows
      >
        <q-route-tab
          exact
          to="/demand-list"
          name="home"
          content-class="q-py-sm"
        >
          <q-icon name="iconfont icon-icon_follow" size="sm" />
          <span class="text-caption">大厅</span>
        </q-route-tab>
        <q-route-tab to="/chance" name="chance" content-class="q-py-sm">
          <q-icon name="iconfont icon-shangjitibao" size="sm" />
          <span class="text-caption">商机</span>
        </q-route-tab>
        <q-route-tab to="/server" name="server" content-class="q-py-sm">
          <q-icon name="iconfont icon-message_fill_light" size="sm" />
          <span class="text-caption">客服</span>
          <q-badge
            color="red"
            rounded
            floating
            v-if="$store.getters['common/countUnread'] > 0"
          >
            <template v-if="$store.getters['common/countUnread'] > 99">
              99+
            </template>
            <template v-else>
              {{ $store.getters["common/countUnread"] }}
            </template>
          </q-badge>
        </q-route-tab>
        <q-route-tab to="/accounts" name="accounts" content-class="q-py-sm">
          <q-icon name="iconfont icon-yonghuguanli-yonghuguanli" size="sm" />
          <span class="text-caption">账户</span>
        </q-route-tab>
        <q-route-tab to="/browser" name="browser" content-class="q-py-sm">
          <q-icon name="iconfont icon-gongzuotai06" size="sm" />
          <span class="text-caption">工作台</span>
        </q-route-tab>
      </q-tabs>
    </div>
    <div class="col-auto text-center">
      <q-btn color="grey-8" flat to="/wallet">
        <q-tooltip> 钱包 </q-tooltip>
        <q-icon name="iconfont icon-qianbao" size="sm" />
      </q-btn>

      <q-btn color="grey-8" flat @click="openSettings">
        <q-tooltip> 设置 </q-tooltip>
        <q-icon name="iconfont icon-settings" size="sm" />
      </q-btn>

      <q-btn color="grey-8" flat @click="logout">
        <q-tooltip> 退出登录 </q-tooltip>
        <q-icon name="logout" size="sm" />
      </q-btn>
    </div>
  </q-drawer>
</template>

<script>
import { authWindow, settingsWindow } from "src/assets/electron";
import { defineComponent, reactive } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  name: "ComponentsNavDrawerVue",
  setup() {
    const $store = useStore();
    const data = reactive({});
    return {
      data,
      openSettings() {
        settingsWindow.show();
      },
      logout() {
        $store.commit("persisted/logout");
        authWindow.show().then(() => {
          window.close();
        });
      },
    };
  },
});
</script>
